<markdown>
# 虚拟滚动

使用 `virtual-scroll` 开启虚拟滚动，注意需要同时设定 `height`。
</markdown>

<template>
  <x-table :columns="columns" :data="data" :scroll-x="1600" virtual-scroll style="height: 300px" />
</template>

<script setup>
const columns = [
  { title: 'name', key: 'name', width: 150, fixed: 'left' },
  { title: 'age', key: 'age', width: 100, fixed: 'left' },
  { title: 'address', key: 'address' },
  { title: 'column 1', key: 'column1' },
  { title: 'column 2', key: 'column2' },
  { title: 'column 3', key: 'column3' },
  { title: 'column 4', key: 'column4' },
  { title: 'column 5', key: 'column5' },
  { title: 'column 6', key: 'column6' },
  { title: 'column 7', key: 'column7' },
  { title: 'column 8', key: 'column8', width: 100, fixed: 'right' }
]

const data = [...Array(10000)].map((_, i) => ({
  name: '灬都是个谜 ' + i,
  age: i,
  key: i,
  address: '佛山市南海区 ' + i,
  column1: 'column1',
  column2: 'column2',
  column3: 'column3',
  column4: 'column4',
  column5: 'column5',
  column6: 'column6',
  column7: 'column7',
  column8: 'column8',
  column9: 'column9'
}))
</script>
